<template>
  <div style="height: 100%;">
    <el-row style="height: 100%;background: #1AA094;">
      <el-col :lg="16" :md="12" class="col_left">
        <h1> Vue 3 商城管理系统</h1>
        <span>技术支持</span>
      </el-col>
      <el-col :lg="8" :md="12" class="col_right">
        <h1>登录</h1>
        <el-form class="login-form" ref="ruleFormRefLogin" :model="ruleFormLogin" :rules="rulesLogin">
          <el-form-item prop="username">
            <el-input v-model="ruleFormLogin.username" placeholder="请输入用户名">
              <template #prefix>
                <el-icon>
                  <UserFilled></UserFilled>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="ruleFormLogin.password" placeholder="请输入密码">
              <template #prefix>
                <el-icon>
                  <Lock></Lock>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="loginHandle">登录</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { Lock, UserFilled } from '@element-plus/icons-vue';
import { ref, reactive } from 'vue'
import { loginFn } from '@/api/login'
import { ElMessage } from 'element-plus';
// 获取el-form表单DOM元素
const ruleFormRefLogin = ref(null);
// 定义用户名和密码的数据源
const ruleFormLogin = reactive({
  username: '',
  password: ''
})
// 定义用户名和密码的验证规则
const rulesLogin = {
  username: [
    { equired: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 15, message: '长度应为5˜15位', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, max: 15, message: '长度应为5˜15位', trigger: 'blur' }
  ]
}
// 登录
const loginHandle = () => {
  ruleFormRefLogin.value.validate(async isValid => {
    if (!isValid) {
      return
    }
    const res = await loginFn(ruleFormLogin)
    console.log(res);
    if (!res.data || res.data.status !== 200) {
      // 登录失败提示
      return ElMessage.error(res.msg)
    } else {
      ElMessage({
        message: "登录成功",
        type: 'success',
      })
    }
    // ...下一步
  })
}
</script>
<style lang="less" scoped>
.col_left {
  color: #fff;
  display: flex;
  // 垂直居中
  align-items: center;
  // 水平居中
  justify-content: center;
  // 将flex方向修改成垂直方向
  flex-direction: column;
}

.col_right {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.login-form {
  width: 240px;
}

.el-button {
  width: 240px;
  background: #1aa094;
}
</style>